<script setup>
import { watch, onMounted } from "vue";
import { nanoid } from 'nanoid'
import mapTool from '@/hook/useBaiduMap'
const props = defineProps(['noteLocation','note']), BMap = window.BMap, mapId = nanoid()
const noteLocation = props.note.noteLocation // 形如 [ [123,123],'都江堰市xxx' ]
let map = null // 当前map对象

if (!noteLocation[0]) noteLocation[0] = [0, 0]

let marker = ref(new BMap.Marker(new BMap.Point(...noteLocation[0])))    // 上传的坐标的标识

const currentLocation = ref({})  // 当前位置，可能没用

onMounted(() => {
  map = new BMap.Map(mapId, { enableMapClick: false }) // 禁用点击地标显示详细
  // 中心点，地图展示级别：先用IP定位一个大范围初始点
  if (!noteLocation[0][0]) { // 为零或空
    new BMap.LocalCity().get(r => {
      map.centerAndZoom(new BMap.Point(r.center.lng, r.center.lat), 15)
      currentLocation.value = { ...r, point: r.center }
    })
  } else {
    console.log(noteLocation[0])
    map.centerAndZoom(new BMap.Point(...noteLocation[0]), 15); // 默认中心点
  }
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  mapTool.control(['GeolocationControl', 'OverviewMapControl'], map) // 加入控件
  // mapTool.style.set('styleChaTian', map) // 更换主题

  // 如果有值，不是零
  if (noteLocation[0][0]) {
    console.log(noteLocation[0])
    // console.log('直接去这个点')
    let p = new BMap.Point(...noteLocation[0])
    map.panTo(p)
    map.addOverlay(marker.value)
    marker.value.setPosition(p)
    mapTool.geo.getLocationText(noteLocation[0], r => noteLocation[1] = r)
  }

  // console.log('开始精确定位！')
  // 浏览器定位
  var geolocation = new BMap.Geolocation()
  geolocation.enableSDKLocation() // SDK辅助定位是否开启
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      // console.log('浏览器定位成功：', r);
      currentLocation.value = r
    }// else {
    //   console.log('浏览器定位失败：' + 'failed' + this.getStatus())
    //   // currentLocation.value 还是之前ip定位的值
    // }
    if (!noteLocation[0][0]) {
      // ip 里面是center, 浏览器是 point
      map.panTo(currentLocation.value.point)
      map.addOverlay(marker.value)
      marker.value.setPosition(currentLocation.value.point)
      noteLocation[0] = [currentLocation.value.point.lng, currentLocation.value.point.lat]
    }
  })

  // 当用户点击地图时，处理其点击的位置
  mapTool.event.add('click', point => noteLocation[0] = [point.lng, point.lat], map)

})



// 只操作noteLocation[0] ，标识同步
watch(() => noteLocation[0], () => {
  if (noteLocation[0]) {
    let p = new BMap.Point(...noteLocation[0])
    map.panTo(p)
    marker.value.setPosition(p)
    mapTool.geo.getLocationText(noteLocation[0], r => noteLocation[1] = r)
  }
})


const searchInput = ref('')  // 搜索输入框
// 当搜索输入框的数据变化，就在当前省搜索
watch(searchInput, (newValue) => {
  mapTool.geo.getPoint(newValue, currentLocation.value.address.province, point => {
    // 将地址解析结果显示在地图上，并调整地图视野
    map.panTo(point);
  });
})

</script>

<template>
  <!-- {{ noteLocation }} -->
  <div style="position:relative;border-radius: 5px;overflow: hidden;">
    <div>
      <el-input v-model="searchInput" placeholder="输入你要记录的位置，默认当前定位" class="searchInput" />
      <div :id="mapId" class="map"></div>
    </div>
    <div class="locationText">
      {{ noteLocation[1] ?? '正在定位当前位置...' }}
    </div>
  </div>
</template>

<style scoped>
.searchInput {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 19;
  width: 300px;

}

.locationText {
  color: black;
  /* 地图是白色的这里弄成黑色 */
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 19;
}

.searchInput ::v-deep(.el-input__wrapper) {
  background-color: var(--model-back-color);
}

.map {
  width: 100%;
  height: 200px;
}

/* 去掉左下角的百度图标和底部的版权文字 */
.map ::v-deep(.BMap_cpyCtrl),
.map ::v-deep(.anchorBL:has(>a>img)) {
  display: none;
}
</style>